<template>
    <div id="app">
        <div id="container" :class="{ transparent: isBackgroundTransparent }" @mouseover="changeBackgroundOpacity(0.5)"
            @mouseleave="changeBackgroundOpacity(1)">
            <!-- 内容 -->
        </div>
        <div id="button-container">
            <router-link to="/" :class="['custom-link', 'custom-title', { active: activeLink === 'home' }]" tag="div"
                @click="changeTextColor('home')">主页</router-link>
            <router-link to="/about" :class="['custom-link', 'custom-title', { active: activeLink === 'about' }]" tag="div"
                @click="changeTextColor('about')">个人简介</router-link>
        </div>
        <div class="spacer"></div> <!-- 添加一个空的<div>作为间距 -->
        <div>
            <router-view></router-view>
        </div>
    </div>
</template>
  
<script>
import todoall from './components/todoall.vue'

export default {
    name: "app",
    data() {
        return {
            isBackgroundTransparent: false,
            activeLink: 'home' // 设置默认选中的链接为 'home'
        };
    },
    components: {
        todoall
    },
    methods: {
        changeBackgroundOpacity(opacity) {
            this.isBackgroundTransparent = opacity < 1;
        },
        changeTextColor(link) {
            if (this.activeLink !== link) {
                this.activeLink = link; // 只有当点击的链接与当前选中的链接不同时，更新 activeLink
            }
        },
        changeBackgroundOpacity(opacity) {
            this.isBackgroundTransparent = opacity < 1;
        }
    }
};
</script>
  
<style scoped>
#button-container {
    width: 250px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    /* 将按钮水平放置并在两个按钮之间分配空间 */
}



.spacer {
    height: 20px;
    /* 设置<div>与下一个<div>之间的间距 */
}

/* 根组件样式 */
.custom-link.custom-title {
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
    /* 可根据需要进行其他样式修改 */
}

#container {
    background-image: url('./assets/1.png');
    width: 100%;
    height: 100%;
    position: fixed;
    background-size: 100%, 100%;
    transition: opacity 3s ease;
    opacity: 1;
    z-index: -1;
}

#container.transparent {
    opacity: 0.5;
}

.custom-link.active {
    color: rgb(224, 197, 61);
    /* 设置选中链接的颜色 */
}
</style>